<template>
    <div id="box">
        <!-- 标题 -->
        <div class="title">
            <li>
                <router-link to="/">
                    <img src="../assets/img/left.png" alt="" class="ret">
                </router-link>
            </li>
            <li class="tit">
                <span>演出日历</span>
            </li>
        </div>
        <!-- 日历标签 -->
        <div class="callabel">
            <button class="btn">七月精选</button>
            <button class="btn">月度看点</button>
            <button class="btn">全部时间</button>
            <span class="btn">
                <van-cell title="选择日期" :value="date" @click="show = true" />
                <van-calendar v-model="show" @confirm="onConfirm" />
            </span>
        </div>
        <!-- 演出类型 -->
        <div class="showtype">
            <div class="all">
                全部
            </div>
            <div class="nav">
                <ul class="navbox">
                    <li>演唱会</li>
                    <li>音乐会</li>
                    <li>话剧歌剧</li>
                    <li>曲苑杂坛</li>
                    <li>展览休闲</li>
                    <li>儿童亲子</li>
                    <li>舞蹈芭蕾</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Calendar } from 'vant';
Vue.use(Calendar);
export default {
  name: "Calendar",
  data() {
    return {
      date: '',
      show: false,
    };
    },
    methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
}
#box {
  font-size: 0.08rem;
}
.ret {
  height: 0.2rem;
  margin: 0.13rem 0 0 0.2rem;
}
.title {
  height: 0.45rem;
  font-size: 0.2rem;
  display: flex;
}
.tit {
  font-size: 0.18rem;
  margin: 0.13rem 0 0 1.16rem;
}
.callabel {
  height: 0.48rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.btn {
  width: 0.8rem;
  height: 0.26rem;
  font-size: 0.13rem;
  background-color: #f5f5f5;
  color: #000;
  border-radius: 0.15rem;
  border: none;
}
.showtype{
    width: 100%;
    height: 0.5rem;
}
.all,.nav {
    float: left;
}
.all{
    width: 12%;  
    height: 0.24rem;
    line-height: 0.24rem;     text-align: center      
}
.navbox{
    width: 5.8rem;
    height: 0.24rem;  
}
.nav{
    width: 88%;
    height: 0.24rem;
    overflow: auto
}
.nav::-webkit-scrollbar{
    display: none;
}
.nav li{
    float: left;
    width: 0.6rem;
    text-align: center;
    height: 0.24rem;
    line-height: 0.24rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    border:1px solid #eee;
    background-color: #fff;
    border-radius: 0.08rem;
    box-sizing: border-box;
}
.btn:hover,.btn:focus{
    color: #ff1762;
    background-color: #ffe5ee;
    border: none
}
.nav li:hover,.nav li:focus{
    color: #ff1762;
    background-color: #ffe5ee;
    border: none
}
.van-cell{
    padding:0;
}
.van-cell__title{
    flex: none;
    font-size: 0.13rem;
    background-color: #f5f5f5;
    border-radius: 0.08rem;
}
.van-cell_value{
    height: 0.12rem;
    width: 0.08rem;
}
</style>

